<template>
	<div class="min-h-screen bg-gray-50 flex flex-col">
		<!-- 顶部导航 -->
		<nav class="h-24 bg-white shadow-sm fixed w-full z-50 flex items-center justify-between px-8">
			<div class="flex items-center gap-8">
				<!-- 系统Logo -->
				<div class="flex items-center gap-4 bg-slate-800 px-5 py-3 rounded-lg">
					<div class="logo-icon w-12 h-12">
						<svg viewBox="0 0 100 100" fill="none">
							<circle cx="50" cy="50" r="45" stroke="url(#gradient1)" stroke-width="3" fill="none" />
							<circle cx="50" cy="50" r="35" stroke="url(#gradient2)" stroke-width="2" fill="none" />
							<path d="M30 40 L50 30 L70 40 L70 60 L50 70 L30 60 Z" fill="url(#gradient3)"
								opacity="0.8" />
							<circle cx="50" cy="50" r="8" fill="white" />
							<defs>
								<linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%">
									<stop offset="0%" style="stop-color:#4A90E2" />
									<stop offset="100%" style="stop-color:#7BB3F0" />
								</linearGradient>
								<linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="100%">
									<stop offset="0%" style="stop-color:#5BA0F2" />
									<stop offset="100%" style="stop-color:#8CC8FF" />
								</linearGradient>
								<linearGradient id="gradient3" x1="0%" y1="0%" x2="100%" y2="100%">
									<stop offset="0%" style="stop-color:#4A90E2" />
									<stop offset="100%" style="stop-color:#6BB0FF" />
								</linearGradient>
							</defs>
						</svg>
					</div>
					<div class="flex flex-col">
						<span class="text-xl font-bold text-blue-600">
							EduLiveLink管理系统
						</span>
						<span class="text-xs text-black">
							智能教育平台
						</span>
					</div>
				</div>
			</div>
			<div class="flex items-center gap-4">
				<button
					class="bg-blue-600 text-white px-6 py-2 rounded-md font-medium hover:bg-blue-700 transition-colors"
					@click="goHome">返回首页</button>
			</div>
		</nav>

		<!-- 上方空白区域 -->
		<div class="h-24 bg-white"></div>

		<!-- 主要内容区域 -->
		<div class="flex flex-1">
			<!-- 侧边栏 -->
			<aside class="w-64 bg-white shadow-sm border-r border-gray-200 fixed h-[calc(100vh-6rem)] z-40">
				<div class="p-6">
					<h2 class="text-lg font-semibold text-gray-900 mb-6">控制台导航</h2>
					<ul class="space-y-1">
						<li>
							<router-link to="/console"
								class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-gray-50 transition-colors"
								:class="currentPath === '/console' ? 'bg-blue-50 text-blue-600' : 'text-gray-700'">
								<span class="w-5 h-5 flex items-center justify-center">
									<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
										stroke-width="2">
										<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
										<polyline points="9 22 9 12 15 12 15 22"></polyline>
									</svg>
								</span>
								<span>控制台首页</span>
							</router-link>
						</li>
						<li>
							<router-link to="/console/usermanagement"
								class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-gray-50 transition-colors"
								:class="currentPath.startsWith('/console/usermanagement') ? 'bg-blue-50 text-blue-600' : 'text-gray-700'">
								<span class="w-5 h-5 flex items-center justify-center">
									<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
										stroke-width="2">
										<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
										<circle cx="8.5" cy="7" r="4"></circle>
										<line x1="20" y1="8" x2="20" y2="14"></line>
										<line x1="23" y1="11" x2="17" y2="11"></line>
									</svg>
								</span>
								<span>用户管理</span>
							</router-link>
						</li>
						<li>
							<router-link to="/console/classmanagement"
								class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-gray-50 transition-colors"
								:class="currentPath.startsWith('/console/classmanagement') ? 'bg-blue-50 text-blue-600' : 'text-gray-700'">
								<span class="w-5 h-5 flex items-center justify-center">
									<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
										stroke-width="2">
										<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
										<polyline points="9 22 9 12 15 12 15 22"></polyline>
									</svg>
								</span>
								<span>班级管理</span>
							</router-link>
						</li>
						<li>
						  <router-link to="/console/coursemanagement"
						    class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-gray-50 transition-colors"
						    :class="currentPath.startsWith('/console/coursemanagement') ? 'bg-blue-50 text-blue-600' : 'text-gray-700'">
						    <span class="w-5 h-5 flex items-center justify-center">
						      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
						        <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
						        <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
						      </svg>
						    </span>
						    <span>课程管理</span>
						  </router-link>
						</li>
						<li>
							<router-link to="/console/resources"
								class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-gray-50 transition-colors"
								:class="currentPath.startsWith('/console/resources') ? 'bg-blue-50 text-blue-600' : 'text-gray-700'">
								<span class="w-5 h-5 flex items-center justify-center">
									<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
										stroke-width="2">
										<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
										<polyline points="14 2 14 8 20 8"></polyline>
										<line x1="16" y1="13" x2="8" y2="13"></line>
										<line x1="16" y1="17" x2="8" y2="17"></line>
										<polyline points="10 9 9 9 8 9"></polyline>
									</svg>
								</span>
								<span>资源管理</span>
							</router-link>
						</li>
						<li>
							<router-link to="/console/settings"
								class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-gray-50 transition-colors"
								:class="currentPath.startsWith('/console/settings') ? 'bg-blue-50 text-blue-600' : 'text-gray-700'">
								<span class="w-5 h-5 flex items-center justify-center">
									<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
										stroke-width="2">
										<circle cx="12" cy="12" r="3"></circle>
										<path
											d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z">
										</path>
									</svg>
								</span>
								<span>系统设置</span>
							</router-link>
						</li>
					</ul>
				</div>
			</aside>

			<!-- 主内容区 -->
			<main class="flex-1 ml-64 p-8">
				<div class="mb-8">
					<h1 class="text-3xl font-bold text-gray-900 mb-2">
						资源管理
					</h1>
					<p class="text-gray-600">
						管理平台所有教学资源，包括查看、编辑和删除资源
					</p>
				</div>

				<!-- 搜索和筛选区域 -->
				<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
					<div class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
						<div>
							<label class="block text-sm font-medium text-gray-700 mb-2">搜索</label>
							<el-input v-model="searchKeyword" placeholder="搜索资源名称或上传者" class="w-full"
								:prefix-icon="Search" clearable />
						</div>
						<div>
							<label class="block text-sm font-medium text-gray-700 mb-2">资源类型</label>
							<el-select v-model="searchType" placeholder="所有类型" class="w-full" clearable>
								<el-option label="视频" value="视频" />
								<el-option label="文档" value="文档" />
								<el-option label="图片" value="图片" />
								<el-option label="音频" value="音频" />
							</el-select>
						</div>
						<div class="md:col-span-1"></div>
						<div class="flex gap-3">
							<el-button type="primary" @click="searchResources">
								搜索
							</el-button>
							<el-button @click="resetSearch">重置</el-button>
						</div>
					</div>
				</div>

				<!-- 资源列表表格 -->
				<div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
					<div class="overflow-x-auto">
						<table class="w-full">
							<thead class="bg-gray-50">
								<tr>
									<th class="px-6 py-4 text-left text-sm font-medium text-gray-900">资源ID</th>
									<th class="px-6 py-4 text-left text-sm font-medium text-gray-900">资源名称</th>
									<th class="px-6 py-4 text-left text-sm font-medium text-gray-900">资源类型</th>
									<th class="px-6 py-4 text-left text-sm font-medium text-gray-900">文件大小</th>
									<th class="px-6 py-4 text-left text-sm font-medium text-gray-900">上传者</th>
									<th class="px-6 py-4 text-left text-sm font-medium text-gray-900">上传时间</th>
									<th class="px-6 py-4 text-left text-sm font-medium text-gray-900">操作</th>
								</tr>
							</thead>
							<tbody class="divide-y divide-gray-200">
								<tr v-for="resource in resourceList" :key="resource.id" class="hover:bg-gray-50">
									<td class="px-6 py-4 text-sm text-gray-900">{{ resource.id }}</td>
									<td class="px-6 py-4 text-sm text-gray-900">{{ resource.name }}</td>
									<td class="px-6 py-4 text-sm text-gray-900">{{ resource.type }}</td>
									<td class="px-6 py-4 text-sm text-gray-900">{{ resource.size }}</td>
									<td class="px-6 py-4 text-sm text-gray-900">{{ resource.uploader }}</td>
									<td class="px-6 py-4 text-sm text-gray-900">{{ resource.uploadTime }}</td>
									<td class="px-6 py-4 text-sm">
										<div class="flex gap-2">
											<button @click="editResource(resource)"
												class="text-blue-600 hover:text-blue-800">编辑</button>
											<button @click="deleteResource(resource)"
												class="text-red-600 hover:text-red-800">删除</button>
										</div>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<!-- 分页 -->
					<div class="px-6 py-4 border-t border-gray-200 flex justify-between items-center">
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page="currentPage" :page-sizes="[5, 10, 20]" :page-size="pageSize"
							layout="total, sizes, prev, pager, next, jumper" :total="totalResources">
						</el-pagination>
					</div>
				</div>

				<!-- 编辑资源对话框 -->
				<el-dialog v-model="showEditDialog" title="编辑资源" width="500px">
					<el-form :model="form" label-width="80px">
						<el-form-item label="资源ID" disabled>
							<el-input v-model="form.id" />
						</el-form-item>
						<el-form-item label="资源名称">
							<el-input v-model="form.name" />
						</el-form-item>
						<el-form-item label="资源类型">
							<el-select v-model="form.type">
								<el-option label="视频" value="视频" />
								<el-option label="文档" value="文档" />
								<el-option label="图片" value="图片" />
								<el-option label="音频" value="音频" />
							</el-select>
						</el-form-item>
						<el-form-item label="上传者">
							<el-input v-model="form.uploader" />
						</el-form-item>
					</el-form>
					<template #footer>
						<el-button @click="showEditDialog = false">取消</el-button>
						<el-button type="primary" @click="saveResource">保存</el-button>
					</template>
				</el-dialog>

				<!-- 删除确认对话框 -->
				<el-dialog v-model="showDeleteDialog" title="确认删除" width="300px">
					<p>确定要删除资源 <span class="font-medium">{{ deleteResourceId }}</span> 吗？</p>
					<template #footer>
						<el-button @click="showDeleteDialog = false">取消</el-button>
						<el-button type="danger" @click="confirmDelete">确认删除</el-button>
					</template>
				</el-dialog>
			</main>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import {
		useRouter,
		useRoute
	} from 'vue-router'
	import {
		Search
	} from '@element-plus/icons-vue'
	import {
		ElMessage
	} from 'element-plus'

	const router = useRouter()
	const route = useRoute()

	// 当前路径
	const currentPath = ref(route.path)

	// 搜索参数
	const searchKeyword = ref('')
	const searchType = ref('')

	// 分页参数
	const currentPage = ref(1)
	const pageSize = ref(10)
	const totalResources = ref(0)

	// 资源列表数据
	const resourceList = ref([{
			id: 'res001',
			name: '数学上册教学视频',
			type: '视频',
			size: '256MB',
			uploader: '张三',
			uploadTime: '2023-09-01 09:30:00'
		},
		{
			id: 'res002',
			name: '语文阅读理解技巧文档',
			type: '文档',
			size: '1.2MB',
			uploader: '李四',
			uploadTime: '2023-09-02 14:15:00'
		},
		{
			id: 'res003',
			name: '英语单词卡片',
			type: '图片',
			size: '4.5MB',
			uploader: '王五',
			uploadTime: '2023-09-03 10:20:00'
		},
		{
			id: 'res004',
			name: '物理实验音频讲解',
			type: '音频',
			size: '32MB',
			uploader: '赵六',
			uploadTime: '2023-09-04 16:40:00'
		},
		{
			id: 'res005',
			name: '历史事件时间轴',
			type: '文档',
			size: '800KB',
			uploader: '张三',
			uploadTime: '2023-09-05 11:10:00'
		}
	])

	// 对话框状态
	const showEditDialog = ref(false)
	const showDeleteDialog = ref(false)
	const deleteResourceId = ref('')

	// 表单数据
	const form = reactive({
		id: '',
		name: '',
		type: '',
		size: '',
		uploader: '',
		uploadTime: ''
	})

	// 初始化
	onMounted(() => {
		totalResources.value = resourceList.value.length
	})

	// 搜索资源
	const searchResources = () => {
		// 实际项目中这里会调用API
		currentPage.value = 1
		// 模拟搜索逻辑
		console.log('搜索资源:', searchKeyword.value, searchType.value)
	}

	// 重置搜索
	const resetSearch = () => {
		searchKeyword.value = ''
		searchType.value = ''
		currentPage.value = 1
	}

	// 分页事件
	const handleSizeChange = (val) => {
		pageSize.value = val
	}

	const handleCurrentChange = (val) => {
		currentPage.value = val
	}

	// 编辑资源
	const editResource = (resource) => {
		// 复制资源数据到表单
		Object.assign(form, {
			...resource
		})
		showEditDialog.value = true
	}

	// 保存资源
	const saveResource = () => {
		// 实际项目中这里会调用API保存数据
		const index = resourceList.value.findIndex(r => r.id === form.id)
		if (index !== -1) {
			resourceList.value[index] = {
				...resourceList.value[index],
				...form
			}
		}
		showEditDialog.value = false
		ElMessage.success('资源保存成功')
	}

	// 删除资源
	const deleteResource = (resource) => {
		deleteResourceId.value = resource.id
		showDeleteDialog.value = true
	}

	// 确认删除
	const confirmDelete = () => {
		// 实际项目中这里会调用API删除数据
		resourceList.value = resourceList.value.filter(r => r.id !== deleteResourceId.value)
		totalResources.value = resourceList.value.length
		showDeleteDialog.value = false
		ElMessage.success('资源删除成功')
	}

	// 返回首页
	const goHome = () => {
		router.push('/')
	}
</script>

<style scoped>
	/* 可以根据需要添加自定义样式 */
</style>